I get the error when I want to make a slider and I have looked for several alternatives to solve it but none of them work. The error is in useEffect(() => {setWidth ( carousel.current.scrollWidth - carousel.current.offsetWidth)}, []); and in carousel.current
import React from "react";
import { motion } from "framer-motion";
import { useRef, useEffect, useState } from "react";
import images from "../images";
function Sliders() {
const [width, setWidth] = useState(0);
const carousel = useRef();
useEffect(() => {
setWidth (carousel.current.scrollWidth - carousel.current.offsetWidth)
}, []);
return (
<div className="Sliders">
<motion.div red={carousel} className="carusel" whileTap={{cursor: "grabbing"}} >
<motion.div drag="x"
dragConstraints={{ right: 0, left: -width}}
className="inner-carousel"
>
{images.map((image) => {
return (
<motion.div className="item" key={image}>
<img src={image} alt="" />
</motion.div>
);
})}
</motion.div>
</motion.div>
</div>
);
}
export default SlidersWhen the component is launched, initially the value for carousel.current is undefined. Just wrap the statement in if condition, and I believe it should work.
useEffect(() => {
if (carousel?.current) {
setWidth (carousel.current.scrollWidth - carousel.current.offsetWidth)
}
}, []);
Note: You can try to console carousel.current before return statement to be sure when the object is undefined and at what point it gets populated.